<template>
    <view class="pb-6" style="position: relative;">
        <view class="w100 pl-30 pr-30 pt-30">
            <uni-card>
                <view class="inforClass">任务信息</view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24">
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 任务名称：</text>
                        <text> {{ taskInfo.practiceTaskName }}</text>
                    </view>
                </view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24">
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 实践课程：</text>
                        <text> {{ taskInfo.practiceTaskTypeName }}</text>
                    </view>
                    <view class="ellipsis-text" style="width: 40%;">
                        <text class="fw-600 fs-26"> 积分上限：</text>
                        <text> {{ taskInfo.pointsCap }}</text>
                    </view>
                </view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24">
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 任务时间：</text>
                        <text>
                            {{ (taskInfo.startTime || '').slice(0, 10) }} ~ {{ (taskInfo.endTime || '').slice(0, 10) }}
                        </text>
                    </view>
                </view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24">
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 报名审核：</text>
                        <text>
                            {{ taskInfo.applyCheck === 0 ? '无需审核，直接参与' : '需要审核通过后参与' }}
                        </text>
                    </view>
                    <view class="ellipsis-text" style="width: 40%;">
                        <text class="fw-600 fs-26"> 人数：</text>
                        <text>
                            {{ taskInfo.applyPeoples || 0 }} / {{ taskInfo.peoplesNumberAstrict || 0 }}
                        </text>
                    </view>
                </view>
            </uni-card>
            <uni-card margin="0">
                <view class="inforClass">学生信息</view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24">
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 姓名：</text>
                        <text> {{ taskInfo.studentName }}</text>
                    </view>
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 学号：</text>
                        <text> {{ taskInfo.studentNumber }}</text>
                    </view>
                </view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24">
                    <uni-tooltip :content="taskInfo.xyName" placement="top">
                        <view class="ellipsis-text">
                            <text class="fw-600 fs-26"> 学院：</text>
                            <text> {{ taskInfo.xyName }}</text>
                        </view>
                    </uni-tooltip>
                    <uni-tooltip :content="taskInfo.bjName" placement="top">
                        <view class="ellipsis-text">
                            <text class="fw-600 fs-26"> 班级：</text>
                            <text> {{ taskInfo.bjName }}</text>
                        </view>
                    </uni-tooltip>
                </view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24">
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 报名时间：</text>
                        <text>
                            {{ (taskInfo.applyTime || '').slice(0, 16) }}
                        </text>
                    </view>
                </view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24">
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 报名状态：</text>
                        <text> {{ taskInfo.participationStatusName }}</text>
                    </view>
                </view>
                <view class="rowsb rowsm mb-20 mt-20 fs-24"
                    v-if="taskInfo.participationStatusName == '驳回' && taskInfo.reason">
                    <view class="ellipsis-text">
                        <text class="fw-600 fs-26"> 驳回原因：</text>
                        <text> {{ taskInfo.reason }}</text>
                    </view>
                </view>
            </uni-card>

        </view>
        <view class="w100" style="position: fixed;bottom: 0;"
            v-if="taskInfo.applyCheck == 1 && taskInfo.participationStatus == 1">
            <view class="w100 rowsa rowsm mt-30 mb-30"
                v-if="permissions.find(v => v == '*:*:*') || permissions.find(v => v == 'practice:user:applicaCheck') && taskInfo.participationStatus == 1">
                <view class="w-202 h-84 br-42 rowsc rowsm colfff"
                    style="background: linear-gradient(to bottom,#64606b,#64606b);" @click="submit(3)">驳回</view>
                <view class="w-202 h-84 br-42 rowsc rowsm colfff"
                    style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="submit(2)">通过</view>
            </view>
        </view>
    </view>
</template>
  
<script>
import { Base64 } from 'js-base64';
export default {
    data() {
        return {
            taskInfo: {},
            permissions: []
        };
    },
    onLoad(e) {
        if (uni.getStorageSync('flag') == 'teacher') {
            this.$tools.axiosFromToken('POST', 'sysUser/getById', {}, '加载中').then(res => {
                if (res.code != 200) return this.$tools.showtt(res.msg)
                let getAllInfo = { ...res.data, user: JSON.parse(Base64.decode(res.data.user)) }
                uni.setStorageSync('getInfo', getAllInfo);
                this.permissions = res.data.permissions.flat() || [];
            })
        }
        this.taskInfo = JSON.parse(e.data);
        this.startTime = this.taskInfo.startTime ? (this.taskInfo.startTime || '').slice(0, 10) : (this.taskInfo.studentStartTime || '').slice(0, 10);
        this.endTime = this.taskInfo.endTime ? (this.taskInfo.endTime || '').slice(0, 10) : (this.taskInfo.studentEndTime || '').slice(0, 10);

    },
    onReady() { },
    methods: {
        submit(type) {
            const data = {
                ids: [this.taskInfo.id],
                participationStatus: type,
            }
            if (type != 2) {
                uni.showModal({
                    title: '驳回原因',
                    content: '',
                    editable: true,
                    placeholderText: '请填写驳回原因',
                    success: (promptRes) => {
                        if (promptRes.confirm) {
                            const reason = promptRes.content;

                            if (reason.trim() === '') {
                                uni.showToast({
                                    title: '驳回理由不能为空',
                                    icon: 'none',
                                });
                                return;
                            }

                            data.reason = reason;
                            this.$tools.axiosFromToken('POST', 'project/apply/check', JSON.stringify(data), '加载中').then(res => {
                                this.$tools.showtt(res.msg)
                                if (res.code != 200) return
                                setTimeout(() => {
                                    this.$tools.goBack(1)
                                }, 1000)
                            })
                        }
                    }
                })
            } else {
                if (this.taskInfo.peoplesNumberAstrict >= 1 && this.taskInfo.peoplesNumberAstrict <= this.taskInfo.applyPeoples) {
                    uni.showModal({
                        title: `确认审核`,
                        content: `报名通过人数超过限制人数，是否确定通过？`,
                        success: (res) => {
                            if (res.confirm) {
                                this.$tools.axiosFromToken('POST', 'project/apply/check', JSON.stringify(data), '加载中').then(res => {
                                    this.$tools.showtt(res.msg)
                                    if (res.code != 200) return
                                    setTimeout(() => {
                                        this.$tools.goBack(1)
                                    }, 1000)
                                })
                            } else if (res.cancel) {
                                console.log('取消');
                            }
                        }
                    });
                } else {
                    this.$tools.axiosFromToken('POST', 'project/apply/check', JSON.stringify(data), '加载中').then(res => {
                        this.$tools.showtt(res.msg)
                        if (res.code != 200) return
                        setTimeout(() => {
                            this.$tools.goBack(1)
                        }, 1000)
                    })
                }
            }
        },
        noPass() {
            this.$tools.goBack(1)
        }
    }

}
</script>
  
<style lang="scss">
page {
    background-color: #f4f5f7;
}

.mark {
    text-align: right;
    color: #f92929;
}

::v-deep .uni-tooltip {
    width: 50%;
    display: flex;
}

::v-deep .uni-tooltip-popup {
    top: 20px;
    right: 0;
    text-align: justify;
    word-wrap: break-word;
}

.ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
    align-items: center;
}

::v-deep .uni-card {
    margin-left: 5px !important;
    margin-right: 5px !important;
    overflow: visible;
}

::v-deep .uni-card__content {
    color: #000 !important;
}

.inforClass {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.inforClass::before {
    content: '';
    width: 5px;
    height: 20px;
    background-color: #007AFF;
    margin-right: 5px;
    display: inline-block;
}


.btn {
    margin: 0 auto;
    margin-top: 50px;
    width: 300px;
    font-size: 26rpx;
    border: 1px solid #f9ae3d;
    padding: 10px 20px;
    border-radius: 20px;
    text-align: center;
    color: #f9ae3d;
    background: #fff;
}

.line {
    width: 4px;
    height: 100%;
    flex-shrink: 0;
    background-color: #007AFF;
    margin-right: 10px;
    overflow: hidden;
}

.content {
    flex: 1;
}
</style>
  